<template>
    <div class="chart-wrapper" :style="{ height: height + 'px' }">
        <div class="slot pie-halo"></div>
        <div class="slot">
            <div
                class="chart"
                :id="id"
                :style="{ height: height + 'px' }"
            ></div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import { COLOR_PLATE } from "@/config/global";
    import { calculateColorBrightness } from "@/lib/extension";

    const ratio = JSON.parse(localStorage.ratio);

    export default {
        name: "",
        data() {
            return {
                option: {},
                chartObj: null,
                useDualTheme: true,
                theme: "night",
            };
        },
        props: {
            id: {
                type: String,
                required: true,
                default: null,
            },
            chartData: {
                type: Array,
                required: true,
                default: () => [{ name: "default", value: 0 }],
            },
            chartColors: {
                type: Array,
                default: () => new Array("#FCFEFD", "#5EB281", "#088E62"),
            },
            height: {
                type: Number,
            },
            legend: {
                type: Boolean,
                default: true,
            },
            legendOrient: {
                type: String,
                default: "horizontal",
            },
        },
        watch: {
            chartData: {
                handler(n) {
                    this.updateChart();
                },
                deep: true,
                immediate: true,
            },
            id: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartColors: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            legend: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            height: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
        },
        mounted() {
            // this.renderChart();
        },
        methods: {
            updateChart() {
                this.determineTheme();
                this.$nextTick(() => {
                    if (this.chartObj) {
                        this.chartObj.setOption(this.option);
                    } else {
                        this.renderChart();
                    }
                });
            },
            renderChart() {
                if (this.chartData[0]) {
                    this.option = {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            show: this.legend,
                            x: "center",
                            y: "bottom",
                            orient: this.legendOrient,
                            data: this.chartData.map((o) => o.name),
                            itemWidth: 8 * ratio,
                            itemHeight: 8 * ratio,
                            textStyle: {
                                color: this.theme === "night" ? "#ffffff" : "#333",
                            },
                        },
                        series: [
                            {
                                type: "pie",
                                center:
                                    this.legendOrient === "horizontal"
                                        ? ["50%", "50%"]
                                        : ["50%", "35%"],
                                radius: "65%",
                                roseType: "radius",
                                data: this.chartData.map((o, i) => {
                                    return {
                                        name: o.name,
                                        value: o.value,
                                        itemStyle: {
                                            shadowOffsetX: 0,
                                            shadowOffsetY: i > 0 ? 0 : 2 * ratio,
                                            shadowBlur: i > 0 ? 0 : 4 * ratio,
                                            shadowColor:
                                                i > 0 ? "#00000000" : "#22A857",
                                            color:
                                                i > 0
                                                    ? this.chartColors[i]
                                                    : {
                                                          type: "radial",
                                                          x: 0.5,
                                                          y: 0.5,
                                                          r: 0.5,
                                                          colorStops: [
                                                              {
                                                                  offset: 0,
                                                                  color: "#FCFEFD", // 0% 处的颜色
                                                              },
                                                              {
                                                                  offset: 0.5,
                                                                  color: "#F8FCF9",
                                                              },
                                                              {
                                                                  offset: 1,
                                                                  color: "#F8FCF9", // 100% 处的颜色
                                                              },
                                                          ],
                                                      },
                                        },
                                    };
                                }),
                                label: {
                                    show: true,
                                    position: "outside",
                                    formatter: "{d}%",
                                    fontFamily: "borda",
                                    color:
                                        this.theme === "night" ? "white" : "#333",
                                    fontSize: 22 * ratio,
                                },
                                labelLine: {
                                    show: true,
                                    length: 1 * ratio,
                                    length2: 15 * ratio,
                                },
                            },
                        ],
                    };
                    //debugger
                    let chartDom = document.getElementById(this.id);
                    this.chartObj = echarts.init(chartDom);
                    this.chartObj.setOption(this.option);
                    this.chartObj.resize();
                    window.resize = () => {
                        this.chartObj.resize();
                    };
                }
            },
            determineTheme() {},
        },
    };
</script>

<style scoped>
    .chart {
        width: 100%;
    }
</style>